<template>

    <div class="vpi center">
        <h1 class="hot">热卖中</h1>
        <br>
        <div class="content">
            <div v-for="(item,index) in list" class="img" @click="detail(index)">
        <div>
    
        <el-image style="width: 270px; height: 296px" :src="`http://localhost:8080/${item.cimg}`"  />
        </div>
    <br>
     <div>
    <p class="cname">{{item.cname}}</p>
    <el-button type="info" plain style="margin-left: 180px; " >￥{{item.price}}</el-button>
  </div>
</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Vpi',

    data() {
        return {
            list:[],
        };
    },

    mounted() {
        this.$http.post("/VpiServlet/queryAll")
        .then((response)=>{
            this.list = response.data;
            console.log(this.list);
        })
    },
    methods: {
        detail(i){
            var arr=this.list[i]
            this.$router.push({
                            name:'detail', 
                            query:{id:arr.id},                  
                        });   
        }
    },
};
</script>

<style lang="css" scoped>
/* .vpi{
    width: 1200px;
    margin: auto;
} */

.img{
    display:inline-block;
    height: 400px;
    box-shadow:4px 4px 15px rgb(161, 160, 160) ;
    margin-left: 20px;
    margin-top: 20px;
}
.cname{
    /* margin-left: -150px; */
    margin-top: -10px;
}
.el-image:hover{
    /* -webkit-filter: blur(2px); Chrome, Safari, Opera */
    filter: blur(8px);
}
</style>